// 系统主界面，绘制标题栏、导航栏，调用其他component
// 调用其他component时传入username，子组件可在props中获取
<template>
    <el-container class="PMSDashboard" style="height: 100%">
        <el-header>
            <div id="Logo">
                <span style="font-size: 20px">PMS 疫情管理系统</span>
            </div>
            <div id="User">
                <span>欢迎使用！当前用户：{{ $route.params.username }}</span>
                <el-dropdown @command="onDropdownSelect">
                    <el-icon style="margin-left: 8px">
                        <arrow-down />
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="quit">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>

        <el-container>
            <el-aside width="200px" v-if="prio === 0">
                <el-scrollbar>
                    <el-menu :default-openeds="['1']" @select="onMenuSelect" default-active="NucleicShow">
                        <el-sub-menu index="1">
                            <template #title>核酸检测</template>
                            <el-menu-item-group>
                                <el-menu-item index="NucleicShow">查询核酸检测记录</el-menu-item>
                                <el-menu-item index="NucleicBook">预约核酸检测</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>疫苗接种</template>
                            <el-menu-item-group>
                                <el-menu-item index="VaccineBook">预约疫苗接种</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                    </el-menu>
                </el-scrollbar>
            </el-aside>

            <el-aside width="200px" v-else-if="prio === 1">
                <el-scrollbar>
                    <el-menu :default-openeds="['1']" @select="onMenuSelect" default-active="NucleicCheck">
                        <el-sub-menu index="1">
                            <template #title>核酸检测</template>
                            <el-menu-item-group>
                                <el-menu-item index="NucleicCheck">处理核酸预约</el-menu-item>
                                <el-menu-item index="NucleicAdd">添加核酸余量</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>疫苗接种</template>
                            <el-menu-item-group>
                                <el-menu-item index="VaccineCheck">处理疫苗接种</el-menu-item>
                                <el-menu-item index="VaccineAdd">添加疫苗余量</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                    </el-menu>
                </el-scrollbar>
            </el-aside>

            <el-aside width="200px" v-else-if="prio === 2">
                <el-menu :default-openeds="['1']" @select="onMenuSelect" default-active="PMSAccount">
                    <el-sub-menu index="1">
                        <template #title>权限管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="PMSAccount">医疗点账号管理</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </el-menu>
            </el-aside>

            <el-aside width="200px" v-else>
                Bad prio: {{ prio }}
            </el-aside>

            <el-main>
                <component :is="curComp" :username="$route.params.username" />
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import NucleicAdd from './hospital/NucleicAdd'
import NucleicCheck from './hospital/NucleicCheck'
import VaccineAdd from './hospital/VaccineAdd'
import VaccineCheck from './hospital/VaccineCheck'

import NucleicBook from './user/NucleicBook'
import NucleicShow from './user/NucleicShow'
import VaccineBook from './user/VaccineBook'

import PMSAccount from './Account'
import { getPrio } from '../utils/request'
import { ElMessage } from 'element-plus'

export default {
    name: 'PMSDashBoard',
    data() {
        return {
            prio: getPrio(),
            curSelect: undefined
        }
    },
    created() {
        if (typeof (getPrio()) === 'undefined') {
            ElMessage({
                message: '尚未登录',
                type: 'error',
                duration: 3 * 1000
            })
            this.$router.replace('/login')
        }
    },
    components: {
        NucleicAdd,
        NucleicCheck,
        VaccineAdd,
        VaccineCheck,
        NucleicBook,
        NucleicShow,
        VaccineBook,
        PMSAccount
    },
    computed: {
        curComp() {
            if (this.curSelect) return this.curSelect;
            if (this.prio === 0) return 'NucleicShow';
            if (this.prio === 1) return 'NucleicCheck';
            if (this.prio === 2) return 'PMSAccount';
            return undefined
        }
    },
    methods: {
        onMenuSelect(index) {
            this.curSelect = index
        },
        onDropdownSelect(command) {
            if (command === 'quit') {
                console.log('quit');
                //TODO
            }
        }
    }
}
</script>

<style scoped>
.PMSDashboard .el-header {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
}

.PMSDashboard .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
}

.PMSDashboard .el-menu {
    border-right: none;
}

.PMSDashBoard #User {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
</style>